<template>
<div class="box">
    <div class="box-header">
        <span class="title">{{title}}</span>
    </div>
    <div class="box-body">
        <div class="chart fullsize" id="chart-eff2-index"></div>
        <x-loading :show="showLoading"></x-loading>
    </div>
</div>
</template>

<script>
import bus from "@/utils/bus";
import xLoading from "@/components/Loading";
import axios from "axios";
import echarts from 'echarts'
export default {
    name: "",
    data() {
        return {
            option: null,
            chartInstance: null,
            showLoading: false,
            depName: null,
            startTime: null
        };
    },
    props: {
        title: String
    },
    components: {
        "x-loading": xLoading
    },
    methods: {
        renderChart() {
            this.showLoading = true;
            this.option = {
                color: ["#3398DB"],
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "line",
                        lineStyle: {
                            opacity: 0
                        }
                    },
                    formatter: function (prams) {
                        if (prams[0].data === 0) {
                            return "效能分析指数：0";
                        } else {
                            return "效能分析指数：" + prams[0].data;
                        }
                    }
                },
                grid: {
                    left: "0%",
                    right: "0%",
                    bottom: "5%",
                    top: "7%",
                    height: "85%",
                    containLabel: true,
                    z: 22
                },
                xAxis: {
                    type: "category",
                    gridIndex: 0,
                    data: [],
                    axisTick: {
                        alignWithLabel: true
                    },
                    axisLine: {
                        lineStyle: {
                            color: "#0c3b71"
                        }
                    },
                    axisLabel: {
                        show: true,
                        interval:0,
                        color: "rgb(170,170,170)",
                        fontSize: 12,
                        rotate:60
                    }
                },
                yAxis: [{
                        type: "value",
                        gridIndex: 0,
                        splitLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        min: 0,
                        max: 100,
                        axisLine: {
                            lineStyle: {
                                color: "#0c3b71"
                            }
                        },
                        axisLabel: {
                            color: "rgb(170,170,170)",
                            formatter: "{value}"
                        }
                    },
                    {
                        type: "value",
                        gridIndex: 0,
                        min: 0,
                        max: 100,
                        splitNumber: 12,
                        splitLine: {
                            show: false
                        },
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            show: false
                        },
                        splitArea: {
                            show: true,
                            areaStyle: {
                                color: ["rgba(250,250,250,0.0)", "rgba(250,250,250,0.05)"]
                            }
                        }
                    }
                ],
                series: [{
                        name: "效能评估得分",
                        type: "bar",
                        barWidth: "30%",
                        xAxisIndex: 0,
                        yAxisIndex: 0,
                        itemStyle: {
                            normal: {
                                barBorderRadius: 30,
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                        offset: 0,
                                        color: "#00feff"
                                    },
                                    {
                                        offset: 0.5,
                                        color: "#027eff"
                                    },
                                    {
                                        offset: 1,
                                        color: "#0286ff"
                                    }
                                ])
                            }
                        },
                        label:{
                            normal:{show:true,position:'top',color:'#fff'}
                        },
                        data: [],
                        zlevel: 11
                    },
                    {
                        name: "背景",
                        type: "bar",
                        barWidth: "50%",
                        xAxisIndex: 0,
                        yAxisIndex: 1,
                        barGap: "-135%",
                        data: [],
                        itemStyle: {
                            normal: {
                                color: "rgba(255,255,255,0.1)"
                            }
                        },
                        zlevel: 9
                    }
                ]
            };
            let params = {
                GroupName: this.depName,
                startTime: this.startTime
            };
            axios
                .get(this.URLHEAD_DVS + "GetEffDataByDepartment", {
                    params: params
                })
                .then(res => {
                    let json = res.data;
                    this.option.xAxis.data = json.Data.map(o => {
                        return o.userName;
                    });
                    this.option.series[0].data = json.Data.map(o => {
                        return (
                            (parseInt(o.effEvaluate.capacity) +
                                parseInt(o.effEvaluate.response) +
                                parseInt(o.effEvaluate.pressure)) /
                            3
                        ).toFixed(2);
                    });
                    this.option.series[1].data = json.Data.map(o=>{
                        return 100;
                    })
                    this.$Crender("chart-eff2-index", this.option);
                    this.showLoading = false;
                });
        }
    },
    mounted() {
        bus.$on("eff-select-dep", msg => {
            this.depName = msg.depName;
            this.startTime = msg.startTime;
            this.renderChart();
        });
    },
    created() {}
};
</script>

<style lang="" scoped>
</style>
